<template>
  <div v-if="hasHistory" class="history-ope-list">
    <span
      :class="['history-ope-btn', !hasUndoStack && 'disabled']"
      @click="undoLastAction"
      >撤销</span
    >

    <span :class="['history-ope-btn', !hasRedoStack && 'disabled']" @click="cancelUndo"
      >取消撤销</span
    >
  </div>
  <div>
    <el-input v-model="shortcutConfig.readRangeMarker.key"></el-input>
    <el-color-picker v-model="shortcutConfig.readRangeMarker.fill" />
    <el-input v-model="shortcutConfig.unReadRangeMarker.key"></el-input>
    <el-color-picker v-model="shortcutConfig.unReadRangeMarker.fill" />
  </div>
  <Annotation
    ref="annotationRef"
    v-model:data="rectList"
    srcUrl="@/assets/zds.jpg"
    :shortcutConfig="shortcutConfig"
  />
  <div v-for="item in rectList">
    {{ item.label }}
  </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import Annotation from "@/components/annotation.vue";
// import Annotation from "@/components/annotation-origin.vue";

const rectList = ref([
  {
    type: "rect",
    id: "element_1755409174402_nhce73bx6",
    rectType: "readRangeMarker",
    x: 0,
    y: 0,
    width: 436,
    height: 241,
    label: "",
    desc: "",
    position: [0, 152, 625.640625, 152, 625.640625, 393, 0, 393],
  },
  {
    type: "rect",
    id: "element_1755409174402_nhce73bx1s",
    rectType: "unReadRangeMarker",
    x: 100,
    y: 0,
    width: 436,
    height: 241,
    label: "",
    desc: "",
    position: [100, 152, 625.640625, 152, 625.640625, 393, 100, 393],
  },
]);

watch(
  () => rectList.value,
  (newVal) => {
    console.log("newVal---", newVal);
  },
  { immediate: true, deep: true }
);

const annotationRef = ref(null);
const hasHistory = computed(() => {
  return hasUndoStack || hasRedoStack;
});
const hasUndoStack = computed(() => {
  return !!annotationRef.value?.historyOperationList?.undoStack?.length;
});
const hasRedoStack = computed(() => {
  return !!annotationRef.value?.historyOperationList?.redoStack?.length;
});

const undoLastAction = () => {
  if (hasUndoStack.value) {
    annotationRef.value.undoLastAction();
  }
};
const cancelUndo = () => {
  if (hasRedoStack.value) {
    annotationRef.value.cancelUndo();
  }
};

const shortcutConfig = ref({
  readRangeMarker: {
    key: "n",
    fill: "#ef4c4c",
  },
  unReadRangeMarker: {
    key: "r",
    fill: "#40ff40",
  },
});
</script>
<style lang="scss" scoped>
.history-ope-list {
  display: flex;
  .history-ope-btn {
    color: green;
    &.disabled {
      color: #ccc;
    }
  }
}
</style>
